<template>
	<view class="details">
		<SRV-topbar  title="店铺业务员列表" isLeft="true"></SRV-topbar>
        <view class="details-top">
        	<view class="details-top-title">
        		总共申请
        		<text class="details-top-num">{{info.open_num}}</text>
        		个超圳商行名额，当前绑定了
        		<text class="details-top-num">{{info.bind_num}}</text>
        		个超圳商行名额，剩余
        		<text class="details-top-num">{{info.over_num}}</text>
        		个名额！
        	</view>
            
            <view class="details-top-but-box">
        		<view class="details-top-but" @click="applyNum()">
        			新增名额
        		</view>
        	</view>
        </view>
		<view class="details-top" style="top: 330rpx;">
			<view class="details-top-title">
				当前业务提成比例：<text class="details-top-num">{{info.merchantRatio}}%</text>
			</view>
		    
		    <view class="details-top-but-box">
				<view class="details-top-but" @click="editRatio(0, info.merchantRatio)">
					修改
				</view>
			</view>
		</view>
		<view class="line" v-for="(item,index) in list" :key="index" :style="index == 0 ? 'margin-top:155px' : ''">
            <view class="link">
                <image :src="item.head_portrait" mode="aspectFill"></image>
                <view class="txt">
                    <view class="txt_top">
                        <text class="oneline">{{item.realname}}</text>
                        <text class="oneline">{{item.mobile}}</text>
                    </view>
                </view>
            </view>
            <view class="link2">
                <view class="txt">{{item.title}}</view>
                <view class="txt">{{item.no}}</view>
            </view>
            <view class="link2">
                <view class="txt">业绩提成比例：{{item.achievement_ratio}}%</view>
                <view class="btnDiv">
					<view @click="unbinding(item.id)">解绑</view>
					<view  @click="editRatio(item.id, item.achievement_ratio)">修改提成比例</view>
				</view>
            </view>
        </view>
		<view v-if="list.length == 0" class="nocontent" style="margin-top:155px">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/base.png" mode="widthFix"></image>
			<text>暂无记录～</text>
		</view>
        <view class="bot">
			<view class="txt1" :style="'height:' + bottomHeight + 'rpx;'" @click="bind()">
			    <text>绑定业务员</text>
			</view>
        </view>
        <uni-popup ref="popup">
            <view class="show">
                <view class="show_title">申请数量</view>
                <input class="show_input" type="number" placeholder="请输入您要申请数量" v-model="payData.openNum"/>
                <view class="show_info" v-if="info.openRemark != ''">
                    <view>说明：</view>
                    <view v-html="info.openRemark"></view>
                </view>
                <view class="show_btn">
                    <text class="show_text" @click="cancel()" style="color: rgba(60, 72, 104, 0.4)">取消</text>
                    <text class="show_text" @click="subNumFun()">确认</text>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="code" type="center">
        	<view class="up-box">
        		<view class="up-title"> 绑定业务员 </view>
        		<view class="up-con">
        			<image class="code-img" :src="info.bindImg" mode=""></image>
        		</view>
        		<view class="up-but-box">
        			<view class="up-but" @click="cancel()"> 确认 </view>
        		</view>
        	</view>
        </uni-popup>
        <uni-popup ref="editRatio" type="center">
        	<view class="up-box">
        		<view class="up-title"> 修改店铺员工业绩提成比例 </view>
        		<view class="up-con">
        			<input class="up-input" type="number" value="" v-model="editVal" />
        			<view class="up-con-visc"> {{info.editRatioRemark}} </view>
        		</view>
        		<view class="up-but-box">
                    <text class="show_text" @click="cancel()" style="color: rgba(60, 72, 104, 0.4)">取消</text>
                    <text class="show_text" @click="subConfigFun()">确认</text>
        		</view>
        	</view>
        </uni-popup>
		<uni-popup ref="showPayView" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>开通费用</text>
					<text>￥{{pay_money}}</text>
				</view>
				<view class="line2"  v-if="pay_money > 0" @click="selPayType(5)">
					<text>余额支付 - 当前余额：{{info.user_money}}</text>
					<view :class="payData.payment_type == 5 ?'sel':'nosel'"  v-if="Number(info.user_money) >= Number(pay_money)"></view>
					<text v-else @click="jump('on_line_recharge')" style="width: 190upx;">余额不足</text>
				</view>
				<view class="line2" v-if="pay_money > 0"  @click="selPayType(1)">
					<text>在线微信支付</text>
					<view :class="payData.payment_type == 1 ?'sel':'nosel'"></view>
				</view>
				<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subPayForm()">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
    var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
    import commonPay from '../../static/commonPay.js';
	export default {
		data() {
			return {
				bottomHeight: 110,
                info: {
                    open_num: 0,
                    bind_num: 0,
                    over_num: 0,
                    oneMoney: 0,
                    user_money: 0,
                    openRemark: '',
                    editRatioRemark: '',
                    bindImg: '',
					merchantRatio: 0,
                },
				payData: {
				    appkey: uni.getStorageSync('appkey'),
				    'access-token': uni.getStorageSync('access-token'),
				    is_use_hdq: 0,
				    payment_type: 1,
				    applyType: 'merchant_num',
				    openNum: 3,
				},
				pay_money: 0,
				list: [],
				editId: 0,
				editVal: 0,
				isPay: true,
			}
		},
		methods: {
            getInfo() {
                serve.request({
                    url: '/member/merchant/info',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v2'
                }).then(res => {
                    this.info = res.data;
					this.isPay = true;
                });
            },
			applyNum(){
                this.$refs.popup.open();
            },
			editRatio(id, val){
				this.editId = id;
				this.editVal = val;
                this.$refs.editRatio.open();
            },
			unbinding(itemId) {
				var _self = this;
				uni.showModal({
				    title: '提示',
				    content: '您确定要解绑该员工吗',
				    success: function(res) {
				        if (res.confirm) {
				            serve.request({
				                url: '/member/merchant/unbinding',
				                data: {
				                    appkey: uni.getStorageSync('appkey'),
				                    'access-token': uni.getStorageSync('access-token'),
				                    id:itemId,
				                },
				                v: '/v2'
				            }).then(res => {
				                uni.showToast({
				                    title: res.message,
				                    icon: 'none'
				                });
				                if (res.code == 200) {
									_self.list = [];
									_self.getInfo();
				                    _self.getList();
				                }
				            });
				        }
				    }
				});
				return ;
			},
            bind() {
                this.$refs.code.open();
            },
			subNumFun() {
				if(this.payData.openNum < 3) {
					uni.showToast({
						title: "申请数量必须三家以上",
						icon : 'none'
					});
					return ;
				}
				this.pay_money = this.info.oneMoney * this.payData.openNum;
            	this.$refs.popup.close();
				this.$refs.showPayView.open();
			},
            selPayType(payType) {
            	if(payType == 5 && Number(this.info.user_money) < Number(this.pay_money)) {
            		return ;
            	}
            	this.payData.payment_type = payType;
                this.$forceUpdate();
            },
			subConfigFun() {
				uni.showLoading({
					title: '提交中···',
					mask: true
				});
				serve.request({
					url: '/member/merchant/set-config',
					data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
						editId: this.editId,
						editVal: this.editVal
					},
				    v: '/v2'
				}).then(res => {
					if(res.code == 200) {
						uni.hideLoading();
						this.cancel();
						if(this.editId == 0) {
							this.info.merchantRatio = this.editVal;
						} else {
							this.getList();
						}
						return ;
					} 
					uni.showToast({
						title: res.message,
						icon : 'none'
					});
				});
			},
            subPayForm() {
                if(this.isPay == false) {
                	return ;
                }
                this.isPay = false;
                serve.request({
                	url: '/member/merchant/open-num',
                	data: this.payData,
					v: '/v2'
                }).then(res => {
                	this.isPay = true;
                	if(res.code != 200){
                		uni.showToast({
                			title: res.message,
                			icon: 'none',
                		});
                		return ;
                	}
                	if(res.data.is_pay == 1) {
                		this.wechatPay(res.data);
                	} else {
						uni.showToast({
							title: "新增成功",
							icon: 'none',
						});
						this.cancel();
                		this.getInfo();
                	}
                });
            },
			wechatPay(item) {
				var _self = this;
				let payId = item.payId;
				let payConfig = item.payConfig;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.timeStamp,
					nonceStr: payConfig.nonceStr,
					package: payConfig.package,
					signType: payConfig.signType,
					paySign: payConfig.paySign,
					success: function(res) {
						_self.queryPayFun(payId, 10);
						return;
					},
					fail: function(err) {
						uni.showToast({
							title: '放弃支付',
							icon: 'none',
							success() {
				                _self.cancel();
							}
						});
						return;
					}
				})
			},
			queryPayFun(payId, num) {
				var _self = this;
				uni.showLoading({
					title: '支付结果查询中···',
					mask: true
				});
				if(num <= 0) {
					uni.hideLoading();
					uni.showToast({
						title: '未接受到支付成功请求，请联系店铺工作人员！',
						icon: 'none',
						success() {
							setTimeout(function() {
							    _self.cancel();
							}, 2000);
						}
					});
					return ;
				}
				setTimeout(function() {
					serve.request({
						url: '/pay/query-pay',
						data:{
							appkey: uni.getStorageSync('appkey'),
							payId: payId,
						},
				        v: '/v2'
					}).then(res => {
						if(res.data.payStatus == 1) {
							uni.showToast({
								title: '支付成功',
								icon: 'none',
								success() {
				                    _self.cancel();
									_self.getInfo();
									return ;
								}
							});
						} else {
							num --;
							queryPayFun(payId,  num);
						}
					});
				}, 1500);
			},
			/* 关闭弹框 */
            cancel(){
            	this.$refs.code.close();
            	this.$refs.editRatio.close();
            	this.$refs.popup.close();
            	this.$refs.showPayView.close();
            },
			getList(){
				serve.request({
                    url: '/member/merchant/clerk-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v2'
                }).then(res => {
                    this.list = res.data;
                });
			},
		},
		onLoad(options) {
            if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
            	this.bottomHeight = 178;
            }
            this.getInfo();
			this.getList();
		},
		onPullDownRefresh() {
			this.list = [];
			this.getList();
		}
	}
</script>

<style scoped lang="scss">
	.details {
		width: 100%;
        .details-top{
        	position: fixed;
        	left: 0;
        	top: 170rpx;
        	background: #ffffff;
        	display: flex;
			width: 100%;
        	padding: 20rpx 30rpx;
        	border-bottom: 2rpx solid rgba(134,134,134,.3);
        }
        .details-top-title{
			width: 70%;
        	font-size: 30rpx;
        }
        .details-top-num{
        	color: #e44b4b;
        	font-size: 36rpx;
        }
        .details-top-but-box{
        	// flex: 2.5;
        	display: flex;
        	justify-content: flex-end;
        	align-items: center;
			width: 22%;
        }
        .details-top-but{
        	padding: 18rpx;
        	background: #e44b4b;
        	border-radius: 8rpx;
        	color: #fff;
        	font-size: 30rpx;
        }
        
        .line {
        	padding: 20rpx 30rpx;
        	border-bottom: 1rpx rgba(57, 72, 107, 0.1) solid;
        
        	.link {
        		display: flex;
        		align-items: center;
        		image {
        			width: 100rpx;
        			height: 100rpx;
        			border-radius: 50%;
        		}
        
        		.txt {
        			margin-left: 30rpx;
        			display: flex;
        			justify-content: center;
        			flex-direction: column;
        			.txt_top{
        				display: flex;
        				align-items: center;
        				image{
        					border-radius: 0;
        					width:90rpx;
        					height:32rpx;
        					margin-right: 7rpx;
        				}
        			}
        			text:first-child{
        				color: #333333;
        				font-size: 32rpx;
        				margin-right: 19rpx;
        			}
        
        			text:last-child {
        				color: #999999;
        				font-size: 28rpx;
        			}
        		}
        	}
			.link2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 60rpx;
				line-height: 60rpx;
				.btnDiv {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 42%;
					view {
						border: 1rpx solid #ccc ;
						padding: 0 10rpx;
					}
				}
			}
		}
		
		.nocontent{
			width: 100%;
			padding-top: 338upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:125upx;
				height:124upx;
			}
			text{
				font-size:28upx;
				color:rgba(204,204,204,1);
			     margin-top: 30upx;
			}
		}
	}
    .bot {
        position: fixed;
        width: 100%;
        height: 100upx;
        bottom: 0upx;
        border-top: 1upx #EBECF0 solid;
        padding-bottom: env(safe-area-inset-bottom);
        background-color: #FFFFFF;
        .txt1 {
            box-shadow: 0px 1upx 0px 0px rgba(235, 236, 240, 1);
            width: 100%;
            height: 100%;
            background: #FFBF0A;
            color: #FFFFFF;
            font-size: 32upx;
            text-align: center;
            line-height: 100upx;
            display: flex;
            text {
                background: #FFBF0A;
                color: #FFFFFF;
                height: 100upx;
                line-height: 100upx;
                width: 100%;
            }
        }
    }
    .up-box{background: #fff;width: 70vw;padding: 20rpx 20rpx 10rpx 20rpx;border-radius: 12rpx;}
    .up-title{text-align: center;line-height: 80rpx;font-size: 36rpx;}
    .up-con{padding: 20rpx;display: flex;flex-direction: column;align-items: center;}
    .code-img{width: 300rpx;height: 300rpx;margin: 20rpx;}
    .up-input{width: 300rpx;border: 2px solid #dfdfdf;padding: 10rpx;border-radius: 10rpx;}
    .up-con-visc{font-size: 30rpx;margin-top: 30rpx;color: #333;}
    .up-but-box{display: flex;width: 100%;justify-content: center;text-align: center;}
    .up-but{width: 100%;height: 60rpx;line-height: 60rpx;}
    .up-but1{width: 50%;border-right: 2rpx solid #dfdfdf;height: 60rpx;line-height: 60rpx;}
    .up-but2{width: 50%;color: #999999;height: 60rpx;line-height: 60rpx;}
    
    .show{
    	width: 600rpx;
    	background: #FFFFFF;
    	border-radius: 20rpx;
    }
    .show_title{
    	text-align: center;
    	font-size: 32rpx;
    	height: 80rpx;
    	line-height: 80rpx;
    	border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
    }
    .show_input{
    	padding: 20rpx 30rpx;
    	border: 2rpx solid #ccc;
    	width: 80%;
    	margin: 50rpx 5%;
    }
    .show_info{
    	padding: 0 20rpx 40rpx;
    }
    .show_btn{
    	font-size: 28rpx;
    	// padding: 20rpx 90rpx;
    	display: flex;
    	justify-content: space-between;
    	border-top: 1rpx rgba(60, 72, 104, 0.05) solid;
    }
    .show_text{
    	width: 50%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
    }
	.pay_type {
		position: relative;
		width: 100%;
		background: #FFFFFF;
		padding-bottom: 140upx;
		max-height: 80vh;
	
		text {
			font-size: 42rpx;
		}
	
		.close {
			position: absolute;
			width: 23upx;
			height: 23upx;
			right: 40upx;
			top: 45upx;
		}
	
		.title {
			width: 100%;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			font-size: 36upx;
			border-bottom: 1upx rgba(251, 251, 253, 1) solid;
		}
	
		.paypir {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			// padding: 20upx 0upx 20upx;
			font-size: 28upx;
	
			text:last-child {
				color: #FF5F60;
				font-size: 50upx;
				font-weight: bold;
				margin-top: 10upx;
			}
		}
	
		.line2 {
			width: 100%;
			box-sizing: border-box;
			padding: 36upx;
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			color: #333333;
			border-bottom: 1upx rgba(251, 251, 253, 1) solid;
	
			.txt {
				color: #999999;
			}
	
			.nosel {
				width: 36upx;
				height: 36upx;
				border: 1upx solid rgba(60, 72, 104, 1);
				border-radius: 50%;
			}
	
			.sel {
				background-image: url(../../static/img/check.png);
				background-repeat: no-repeat;
				width: 40upx;
				height: 40upx;
				background-size: 100%;
			}
			
			.nocheck {
				width: 36upx;
				height: 36upx;
				border: 1upx solid rgba(60, 72, 104, 1);
				border-radius: 20%;
			}
			
			.check {
				background: url(../../static/img/checkbox_check.png);
				background-repeat: no-repeat;
				width: 40upx;
				height: 40upx;
				background-size: 100%;
			}
		}
	
		.pay_bot {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			height: 100upx;
			background: #FFBF0A;
			color: #fff;
			font-size: 32upx;
			line-height: 100upx;
			text-align: center;
			border-radius: 0;
	
			&::after {
				border: none;
			}
		}
	}
</style>
